<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标</title>
    <link rel="stylesheet" href="../../vendors/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body,html{
            overflow: hidden;
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<script>
    function heart(x, y, color, size, type) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.type = type;
        this.create = function () {
            var tempEle = document.createElement("i");
            tempEle.setAttribute("class","fa "+this.type);
            tempEle.setAttribute("aria-hidden","true");
            tempEle.style.position = "absolute";
            tempEle.style.fontSize = this.size + "px";
            tempEle.style.left = this.x+"px";
            tempEle.style.top = this.y+"px";
            tempEle.style.color = this.color;
            document.body.appendChild(tempEle);
        }
        this.create();
    }
    var colorList = ["#ea8a8a","#fc6b3f","#f7ca44","#d5eeff","#fafccb","#1e1548","#e40475","#ec9e69"];
    var typeList = ["fa-heart","fa-heartbeat","fa-heart-o","fa-gratipay"];
    document.body.addEventListener("click",function () {
        document.body.addEventListener("mousemove",function (ev) {
            var clientX = ev.clientX;   //鼠标移动时x坐标
            var clientY = ev.clientY;   //鼠标移动时y坐标
            new heart(clientX,clientY,colorList[Math.ceil(Math.random()*colorList.length)],20 + Math.random()*20,
                typeList[Math.ceil(Math.random()*typeList.length)]);
        })
    });
</script>
</body>
</html>